<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>YXB</title>
		<style>
			body {

			}
		</style>
		<link rel="styleSheet" href="" type="text/css">
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>


<h1>事件冒泡: 打开控制台..console.log.</h1>

<h3>使用的是事件冒泡，当点击outC的时候，打印顺序是3–>2–>1。如果将false改成true使用事件捕获，打印顺序是1–>2–>3。</h3>

		<div id="out" style="width:500px; height:500px; background:red;">
			<div id="middle" style="height:400px; width: 400px; background:green;">
				<div id="inside" style="height:300px; width: 300px; background:yellow;"></div>
			</div>
		</div>



	</body>
	<script type="text/javascript">
		window.onload = function() {
			var out = document.getElementById("out");
			var middle = document.getElementById("middle");
			var inside = document.getElementById("inside");

			// 使用事件冒泡
			out.addEventListener('click', function() {
				console.log("out");
			}, false);
			middle.addEventListener('click', function() {
				console.log("middle");			
			}, false);
			inside.addEventListener('click', function() {
				console.log("inside");
			}, false);
		};
	</script>
</html>
